<template >
	<div class="contain-report">
		<div class="report-title">系统案例管理</div>
		<div class="report-search">
      <el-select placeholder="请选择案例类别" @change="getStudentNotice" clearable @close="form.recipeClassId = null"
                 v-model="form.recipeClassId"  style="width: 300px;margin-right: 20px">
        <el-option
            v-for="item in cateGoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        >
        </el-option>
      </el-select>
			<el-select placeholder="请选择实验室" v-model="form.laboratoryId" style="width: 300px;margin-right: 20px" @change="getStudentNotice" clearable @close="form.laboratoryId = null">
				<el-option v-for="item in laboratoryList" :key="item.id" :label="item.laboratoryName" :value="item.id"></el-option>
			</el-select>
			<el-input style="width: 300px"
					  placeholder="请输入"
					  v-model="form.name"
					  clearable
					  @clear="getStudentNotice"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px;cursor: pointer" @click="getStudentNotice"></i>
			</el-input>
		</div>
		<div class="report-add">
			<div class="add-box" @click="addDialog = true">
				<i class="el-icon-circle-plus-outline"></i>
				<span >添 加</span>
			</div>
		</div>
		<div class="report-list" v-if="tableList.length !== 0" v-for="item in tableList" :key="item.id">
			<div class="list-box">
				<h3 style="margin-bottom: 10px">{{item.name}}</h3>
				<span style="color: #999">{{item.message}}</span>
			</div>
			<div class="right">

				<div class="right-content">
					<span style="margin-bottom: 10px">实验室:</span>
					<span>{{item.laboratoryName}}</span>
				</div>

				<div class="right-date">
					<span style="margin-bottom: 10px">上传时间:</span>
					<span>{{item.createTime}}</span>
				</div>
        <div class="right-date">
          <span style="margin-bottom: 10px">案例类型:</span>
          <span>{{item.recipeClassName}}</span>
        </div>
				
				<div class="right-content">
					<span style="margin-bottom: 10px">版本:</span>
					<span>{{item.versionNumber}}</span>
				</div>
				<div class="btns">
          <el-button type="text" @click="seeTemplate(item)">查看</el-button>
					<el-button type="text" @click="historyReport(item.id)">版 本</el-button>
					<el-button type="text" @click="downloadFile(item.url)">下 载</el-button>
					<el-button type="text" @click="openEdit(item)">更 新</el-button>
					<el-button type="text" @click="deleteById(item.id)">删 除</el-button>
				</div>
			</div>
		</div>
		<div class="report-nolist" v-if="tableList.length === 0">
			<el-empty description="暂无数据"></el-empty>
		</div>
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		
		<el-dialog
				:show-close="false"
				:visible.sync="addDialog"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">添加系统案例</div>
				<div class="box-body">
					<el-form label-width="100px">
						<el-form-item label="案例名称:">
							<el-input placeholder="请输入案例名称" v-model="addForm.name"></el-input>
						</el-form-item>
						<el-form-item label="案例内容:">
							<el-input type="textarea" v-model="addForm.description" placeholder="请输入案例内容" :rows="2"></el-input>
						</el-form-item>
						<el-form-item label="实验室:">
							<el-select placeholder="请选择实验室" v-model="addForm.laboratoryId" style="width: 100%">
								<el-option
										v-for="item in laboratoryList"
										:key="item.id"
										:label="item.laboratoryName"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
            <el-form-item label="案例类别:">
              <el-select placeholder="请选实验室指导类别" v-model="addForm.recipeClassId" style="width: 100%">
                <el-option
                    v-for="item in cateGoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
						<el-form-item label="上传附件:">
							<el-upload
									class="upload-demo"
									:action= uploadUrl
									:headers = myHeaders
									ref='upload'
									:on-success="handleChange"
									:limit="1"
									:show-file-list="false"
							>
								<el-button size="small" type="primary" :disabled="disabled">{{!disabled ? '点击上传' : '上传成功'}}</el-button>
								<div slot="tip" style="font-size: 12px">文件扩展名: .doc .docx .pdf</div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button type="primary" size="small"  @click="subMitForm" style="margin-right: 20px">提 交</el-button>
						<el-button size="small" @click="consoleForm">取 消</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
		<el-dialog
				:show-close="false"
				:visible.sync="editDialog"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">更新系统案例</div>
				<div class="box-body">
					<el-form label-width="100px">
						<el-form-item label="案例名称:">
							<el-input placeholder="请输入案例名称" v-model="editForm.name"></el-input>
						</el-form-item>
						<el-form-item label="案例内容:">
							<el-input type="textarea" v-model="editForm.description" placeholder="请输入案例内容" :rows="2"></el-input>
						</el-form-item>
						<el-form-item label="实验室:">
							<el-select placeholder="请选择实验室" v-model="editForm.laboratoryId" style="width: 100%">
								<el-option
										v-for="item in laboratoryList"
										:key="item.id"
										:label="item.laboratoryName"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
            <el-form-item label="案例类别:">
              <el-select placeholder="请选实验室指导类别" v-model="editForm.recipeClassId" style="width: 100%">
                <el-option
                    v-for="item in cateGoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
						<el-form-item label="上传附件:">
							<el-upload
									class="upload-demo"
									:action= uploadUrl
									:headers = myHeaders
									ref='upload'
									:on-success="handleChangeEdit"
									:limit="1"
									:show-file-list="false"
							>
								<el-button size="small" type="primary" :disabled="disabled">{{!disabled ? '点击上传' : '上传成功'}}</el-button>
								<div slot="tip" style="font-size: 12px">文件扩展名: .doc .docx .pdf</div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button type="primary" size="small"  @click="editNotice" style="margin-right: 20px">提 交</el-button>
						<el-button size="small" @click="editDialog = false">取 消</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
		
		<el-dialog
				:show-close="false"
				:visible.sync="history"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">历史版本</div>
				<div class="box-body">
					<p style="font-size: 20px">案例名称: {{fileTitle}}</p>
					<div class="file-list">
						<div class="file-box" v-for="item in historyList" :key="item.id">
							<p class="left">
								<span>{{item.createTime}}</span>
								<span v-show="item.type === 1">当前版本</span>
							</p>
							<el-button type="text" size="mini" @click="downloadFile(item.url)">下载</el-button>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
    <el-dialog
        :show-close="false"
        :visible.sync="seeDialog"
        width="40%"
    >
      <div class="dialog-box">
        <div class="box-top">查看案例</div>
        <div class="box-body">
          <el-form label-width="80px">
            <el-form-item label="报告名称:">
              <el-input placeholder="请输入报告名称" disabled v-model="seeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="报告描述:">
              <el-input type="textarea" disabled v-model="seeForm.description" placeholder="请输入报告描述(可选)"
                        :rows="3"></el-input>
            </el-form-item>
            <el-form-item label="案例类别">
              <el-select
                         v-model="seeForm.recipeClassId"  disabled style="width: 100%">
                <el-option
                    v-for="item in cateGoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="实验室:">
              <el-select placeholder="请选择实验室" disabled v-model="seeForm.laboratoryId" style="width: 100%">
                <el-option
                    v-for="item in laboratoryList"
                    :key="item.id"
                    :label="item.laboratoryName"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="text" @click="openUrl(seeForm.url,seeForm.id)">查看文件</el-button>
            </el-form-item>
          </el-form>
          <div class="form-btn">
            <el-button size="small" @click="seeDialog = false">关 闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-drawer
        size='50%'
        close-on-press-escape
        :visible.sync="dialog"
        :with-header="false">
      <div class="docWrap" v-if="showFile === 0">
        <!-- 预览文件的地方（用于渲染） -->
        <div ref="file"></div>
      </div>
      <iframe :src="fileUrl" v-if="showFile === 1" style="width: 100%;height: 100%"></iframe>
    </el-drawer>
	</div>
</template >

<script >
    import { laboratoryList} from "../../api/notice";
    import {teacherCase, addCase, deleteCaseById, editCase, historyCaseById} from "../../api/case";
    import common from "../../utils/common";
    import {getRecipeClassFindList} from "@/api/laboratory";
    let docx = require("docx-preview");
    import request from "../../utils/request";
    export default {
        name: "guidanceResources",
        data(){
            return{
              fileUrl:'',
              cateGoryList:null,
                uploadUrl: common.requestUrl + '/upload/uploadWordFile',
                myHeaders: {
                    satoken: ''
                },
                form:{
                  recipeClassId:null,
                    laboratoryId: null,
                    name: "",
                    pageIndex: 1,
                    pageSize: 5
                },
              dialog:false,
                laboratoryList:[],
                tableList:[],
                total:null,
				disabled:false,
              showFile:null,
                addDialog:false,
                addForm:{
                  recipeClassId:null,
                    description: "",
                    laboratoryId: null,
                    name: "",
                    url: ""
                },
                editDialog:false,
                editForm:{},
                seeForm:{},
                seeDialog:false,
                fileTitle:'',
                history:false,
                historyList:[],
            }
        },
        created () {
            this.myHeaders.satoken = sessionStorage.getItem('token')
        },
        mounted() {
            this.getLaboratoryList()
            this.getStudentNotice()
          this.getcateGoryList()
        },
        methods: {
            async getLaboratoryList(){
                const { data } = await laboratoryList()
                if (data.code === 200){
                    this.laboratoryList = data.data
                }
            },
          seeTemplate(item) {
            console.log(item)
            this.seeDialog = true
            this.seeForm = item
          },
          openUrl(url, id) {
            this.seeDialog = false

            let parts = url.split(".");
            let extension = parts[parts.length - 1];
            console.log(extension)
            if (extension === 'docx' || extension === 'DOCX') {
              this.dialog = true
              this.showFile = 0
              request({
                url: "/upload/getRecipe/" + id,
                method: 'get',
                responseType: 'blob',
              }).then(resp => {
                docx.renderAsync(resp.data, this.$refs.file); // 渲染到页面
              })
            } else if (extension === 'doc' || extension === 'DOC') {
              this.downloadFile(url)
            } else {
              this.dialog = true
              this.showFile = 1
              this.fileUrl = url
            }

          },
            async getStudentNotice(){
                const { data } = await teacherCase(this.form)
                console.log('ppp',data)
                if (data.code === 200){
                    this.tableList = data.data.data
                    this.total = data.data.total
                }
            },
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getStudentNotice()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getStudentNotice()
            },
            consoleForm(){
                this.addDialog = false
                this.addForm = {}
            },
            openEdit(item){
                console.log(item)
                const {description,id,laboratoryId,name,url,recipeClassId} = item
                this.editForm = {description,id,laboratoryId,name,url,recipeClassId}
                this.editDialog = true
            },
          //查询案例类别
          async getcateGoryList() {
            const {data} = await getRecipeClassFindList()
            console.log(data)
            if (data.code === 200) {
              this.cateGoryList = data.data
            }
          },
            async editNotice(){
                const { data } = await editCase(this.editForm)
                if (data.code === 200){
                    this.$message.success(data.message)
                    this.editDialog = false
                    await this.getStudentNotice()
                }
            },
            deleteById(id){
                this.$confirm('此操作将永久删除该系统案例, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteCaseById(id).then(res=> {
                        if (res.data.code === 200){
                            this.$message.success(res.data.message)
                            this.getStudentNotice()
                        }
                    })
                }).catch(() => {
                    this.$message.warning('已取消删除')
                });
            },
            openSee(item){
                this.seeForm = item
                this.seeDialog = true
            },
            handleChange(res,file){
                console.log(res)
                if (res.code === 200){
                    this.$message.success('文件上传成功')
                    this.disabled = true
                    this.addForm.url = res.data.fileUrl
                    this.$refs.upload.clearFiles() //上传成功之后清除历史记录
                }
            },
            handleChangeEdit(res,file){
                console.log(res)
                if (res.code === 200){
                    this.$message.success('文件上传成功')
                    this.disabled = true
                    this.editForm.url = res.data.fileUrl
                    this.$refs.upload.clearFiles() //上传成功之后清除历史记录
                }
            },
            async subMitForm(){
                console.log(this.addForm)
                for (let key in this.addForm){
                    if (!this.addForm[key]){
                        return this.$message.error('请将系统案例填写完整')
                    }
                }
                const { data } = await addCase(this.addForm)
                console.log(data)
                if (data.code === 200){
                    this.$message.success(data.message)
                    this.addForm = {}
                    this.addDialog = false
                    this.disabled = false
                    await this.getStudentNotice()
                }
			},
            async historyReport(id){
                this.history = true
                const { data } = await historyCaseById(id)
                console.log(data)
                if (data.code === 200){
                    this.historyList = data.data.data
                    this.fileTitle = this.historyList[0].name
                }
            },
            downloadFile(url){
                if (!url){
                    this.$message.error('暂无案例文件')
                }else {
                    this.$confirm('下载该案例, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        window.open(url, '_self')
                    }).catch(() => {
                        this.$message.info('已取消下载')
                    });

                }
            },
        },
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.dialog-box{
			width: 100%;
			min-height: 50vh;
			border-radius: 5px;
			overflow: hidden;
			.box-top{
				width: 100%;
				height: 10vh;
				background-image: linear-gradient(to left, #3591d4 0%, #50b3da 50%, #85f9e6 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				color: #fff;
			}
			.box-body{
				width: 100%;
				height: 80%;
				padding:5% 10%;
				box-sizing: border-box;
				background-color: #ffffff;
				/deep/.el-input__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #ecedef;
				}
				.form-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.file-list{
					margin-top: 20px;
					width: 100%;
					.file-box{
						margin-top: 10px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.report-title {
			font-size: 22px;
			color: #333;
		}
		.report-search{
			width: 100%;
			margin: 30px 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-add{
			width: 100%;
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.add-box{
				width: 100%;
				border-radius: 5px;
				border: 1px dashed #6ba9ff;
				padding: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				i{
					font-size: 20px;
					color: #6ba9ff;
					margin-right: 5px;
				}
				span{
					font-size: 16px;
					color: #6ba9ff;
				}
				&:hover{
					cursor: pointer;
				}
			}
		}
		.report-list{
			width: 100%;
			margin: 20px 0;
			background-color: #fff;
			border-radius: 20px;
			box-shadow: 0 0 5px 0 #ccc;
			padding: 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list-box{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
			}
			.right{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.right-content{
					width: fit-content;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.right-date{
					width: fit-content;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.btns{
					width: 40%;
					padding: 0 5%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
				}
			}
			
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
